<template>
    <!-- components/customTabBar/index.wxml -->
    <view class="custom-tabs">
        <view class="custom-tabs custom-tabs-view">
            <view :class="(activeIdx === idx ? 'active' : 'default') + ' tab-list'" :data-current="idx" @tap="swichTabBar" v-for="(itemName, idx) in tabArray" :key="idx">
                <van-icon class-prefix="iconfont" :name="activeIdx === idx ? itemName.selectIcon : itemName.icon" size="44rpx"></van-icon>

                <view>{{ itemName.name }}</view>
            </view>
        </view>

        <view class="tabbar-center">
            <van-icon style="margin-top: 6rpx" class-prefix="iconfont" name="caidanyuan1" size="105rpx" color="white"></van-icon>

            <view class="tabbar-icon-view">
                <image class="tabbar-icon" src="/static/resource/image/chunqiuguolv.png" mode="aspectFit" @tap="onTabCenterClick" />
                <view :class="activeIdx === 1 ? 'active' : 'default'" style="margin-top: -9.5rpx">文化</view>
            </view>
        </view>
    </view>
</template>

<script>
// components/customTabBar/index.js
export default {
    data() {
        return {
            tabArray: [
                {
                    name: '首页',
                    icon: 'shouye-2',
                    selectIcon: 'shouye-1'
                },
                // {
                //   "name": "扫一扫",
                //   "icon": "saoyisao-2",
                //   "selectIcon": "saoyisao-1"
                // },
                //中间占位控件
                {
                    name: '',
                    icon: '',
                    selectIcon: ''
                },
                // {
                //   "name": "消息",
                //   "icon": "xiaoxi-2",
                //   "selectIcon": "xiaoxi-1"
                // },
                {
                    name: '我的',
                    icon: 'wode-2',
                    selectIcon: 'wode-1'
                }
            ]
        };
    },
    /**
     * 组件的属性列表
     */
    props: {
        activeIdx: {
            type: Number,
            default: 0
        }
    },
    /**
     * 组件的方法列表
     */
    methods: {
        swichTabBar(e) {
            let count = e.currentTarget.dataset.current;
            if (this.activeIdx == count) {
                return;
            }
            this.$emit('onTabClick', {
                detail: count
            });
        },
        onTabCenterClick(e) {
            if (this.activeIdx == 1) {
                return;
            }
            this.$emit('onTabClick', {
                detail: 1
            });
        }
    },
    created: function () {}
};
</script>
<style>
@import './index.css';
</style>
